<template>
  <div class="nav">
    <div class="nav-img">
      <div class="btn-back"></div>
      <div class="btn-home"></div>
      <div class="btn-news"></div>
      <div class="btn-refresh"></div>
      <div class="btn-changecolor"></div>
      <div class="btn-infolist"></div>
      <div class="btn-fenshi"></div>
      <div class="btn-kline"></div>
      <div class="btn-dayline"></div>
      <div class="btn-weakline"></div>
      <div class="btn-mouthline"></div>
      <div class="btn-oneline"></div>
      <div class="btn-threeline"></div>
      <div class="btn-fiveline"></div>
      <div class="btn-fifteenline"></div>
      <div class="btn-halfline"></div>
      <div class="btn-hourline"></div>
    </div>
    <div class="nav-title">中远分析盛世行情分析系统</div>
    <div class="nav-btn">
      <div class="btn-tuichu"></div>
      <div class="btn-luntan"></div>
      <div class="btn-jiaoyi" @click="jiaonyi()"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disfooter: false
    };
  },
  mounted() {},
  methods: {
    jiaonyi() {
      this.disfooter = !this.disfooter;
      if (this.disfooter == true) {
        var ladata = 70;
       this.$store.commit('set', { datatop: ladata });
      } else {
        var ladata = 100;
        this.$store.commit('set', { datatop: ladata });
      }
    }
  }
};
</script>

<style scoped lang="less">
.nav {
  background: linear-gradient(#ddd, #fbf6f6, #ddd);
  width: 100%;
  height: 25px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .nav-img {
    width: 45%;
    min-width: 500px;
    div {
      float: left;
      background: url(../assets/navimg.png) no-repeat;
      height: 16px;
      width: 16px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 1px;
      margin-right: 3px;
    }
    div:hover {
      border: 1px solid #333;
      border-radius: 3px;
    }
    .btn-back {
      background-position: -331px 0;
    }
    .btn-home {
      background-position: -347px 0;
    }
    .btn-news {
      background-position: -363px 0;
    }
    .btn-refresh {
      background-position: -315px 0;
    }
    .btn-changecolor {
      background-position: -299px 0;
    }
    .btn-infolist {
      background-position: -459px 0;
    }
    .btn-fenshi {
      background-position: -475px 0;
    }
    .btn-kline {
      background-position: -427px 0;
    }
    .btn-dayline {
      background-position: -379px 0;
    }
    .btn-weakline {
      background-position: -395px 0;
    }
    .btn-mouthline {
      background-position: -411px 0;
    }
    .btn-oneline {
      background-position: -75px 0;
    }
    .btn-threeline {
      background-position: -123px 0;
    }
    .btn-fiveline {
      background-position: -43px 0;
    }
    .btn-fifteenline {
      background-position: -139px 0;
    }
    .btn-halfline {
      background-position: -235px 0;
    }
    .btn-hourline {
      background-position: -251px 0;
    }
  }
  .nav-title {
    color: red;
    text-align: left;
    width: 180px;
    cursor: default;
  }
  .nav-btn {
    width: 30%;
    min-width: 300px;
    div {
      float: right;
      height: 20px;
      width: 74px;
      background: url(../assets/btn.png) no-repeat;
      margin-left: 5px;
    }
    .btn-jiaoyi {
      background-position: -286px 0;
    }
    .btn-luntan {
      background-position: -373px 0;
    }
    .btn-tuichu {
      background-position: -203px 0;
    }
  }
}
</style>
